<template>
    <div id="all">
      <el-card>
           <!--模糊查询-->
      <div class="search">
              <el-row gutter="20">
                  <el-col :span="6">
                      <el-input
                              v-model="query.geoModel"
                              size="medium"
                              placeholder="请输入地磁编号">
                      </el-input>
                  </el-col>
                  <el-col :span="2">
                      <el-button type="primary" size="medium" @click="loadGeo">查询</el-button>
                  </el-col>
                  
                  <el-col :span="13">
                      <el-button type="info" size="medium" @click="reset">重置</el-button>
                  </el-col>
          <el-col :span="2">
            <el-button type="success" size="medium" @click="dialog.addshow=true">添加</el-button>
          </el-col>
              </el-row>
          </div>
  
           <!--表格-->
           <el-table
                  :data="GeoTableData"
                  stripe
                  style="width: 100%;margin-top:10px">
              <el-table-column
                      prop="geoModel"
                      label="地磁型号">
              </el-table-column>
              <el-table-column
                      prop="reservedVar"
                      label="地磁名称">
              </el-table-column>
              <el-table-column
                      prop="pkNo"
                      label="绑定泊位">
              </el-table-column>
              <el-table-column
                      prop="secName"
                      label="所属路段">
              </el-table-column>
              <el-table-column
                      prop="pkStatus"
                      label="泊位状态">
                      <template slot-scope="scope">
          				    <span v-if="scope.row.pkStatus=='-1'">未激活</span>
          				    <span v-if="scope.row.pkStatus=='1'">有车</span>
                            <span v-if="scope.row.pkStatus=='0'">无车</span>
         			  </template>
              </el-table-column>
              <el-table-column
                      prop="geoStatus"
                      label="地磁状况">
                      <template slot-scope="scope">
          				    <span v-if="scope.row.pkStatus=='-1'">未激活</span>
          				    <span v-if="scope.row.pkStatus=='1'">离线</span>
                            <span v-if="scope.row.pkStatus=='0'">在线</span>
         			  </template>
              </el-table-column>
              <el-table-column
                      prop="pkCreateTime"
                      label="创建时间">
              </el-table-column>
              <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                      <el-dropdown trigger="click">
                          <el-button size="mini" type="warning" >编辑</el-button>
                          <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item class="clearfix">
                                  <el-button size="mini" type="priamry" @click="handleEdit(scope.row.geoId)" plain>修改</el-button>
                              </el-dropdown-item>
                              <el-dropdown-item class="clearfix">
                                  <el-popconfirm
                                          title="这是一段内容确定删除吗？"  @confirm="handleDelete(scope.row.geoId)">
                                      <el-button size="mini" slot="reference" type="danger">删除</el-button>
                                  </el-popconfirm>
                              </el-dropdown-item>
                          </el-dropdown-menu>
                      </el-dropdown>
                  </template>
              </el-table-column>
               </el-table>
  
           <!--分页-->
           <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="query.currentPage"
                  :page-sizes="pageInfo.pageSizes"
                  :page-size="query.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageInfo.total"
          >
          </el-pagination>
  
      <!--添加地磁-->
      <el-dialog title="添加设备" :visible.sync="dialog.addshow" width="30%">
              <el-form ref="addForm" :model="addForm" label-width="80px">
                <el-row>
                      <el-col :span="24">
                          <el-form-item label="地磁型号" prop="geoModel">
                              <el-input v-model="addForm.geoModel"></el-input>
                          </el-form-item>
                          <el-form-item label="地磁名称" prop="reservedVar">
                              <el-input v-model="addForm.reservedVar"></el-input>
                          </el-form-item>
                          <el-form-item label="地磁状态" prop="geoStatus">
                              <el-input v-model="addForm.geoStatus"></el-input>
                          </el-form-item>
                          <el-form-item label="绑定泊位" prop="pkId">
									<el-select
										v-model="addForm.pkId"
										placeholder="请选择"
										style="width: 100%"
									>
										<el-option
										v-for="item in parkList"
										:key="item.pkId"
										:label="item.pkNo"
										:value="item.pkId"
										>
								</el-option>
							</el-select>
						</el-form-item>
                      </el-col>
                  </el-row>
              </el-form>
              <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.addshow = false">取 消</el-button>
          <el-button type="primary" @click="save()">确 定</el-button>
        </span>
      </el-dialog>

      <!--修改地磁-->
      <el-dialog title="修改地磁信息" :visible.sync="dialog.updateshow" width="30%">
			<el-form ref="updateForm" :model="updateForm" label-width="80px">
                <el-row>
                    <el-col :span="24">
                          <el-form-item label="地磁型号" prop="geoModel">
                              <el-input v-model="updateForm.geoModel"></el-input>
                          </el-form-item>
                          <el-form-item label="地磁名称" prop="reservedVar">
                              <el-input v-model="updateForm.reservedVar"></el-input>
                          </el-form-item>
                          <el-form-item label="地磁状态" prop="geoStatus">
                              <el-input v-model="updateForm.geoStatus"></el-input>
                          </el-form-item>
                          <el-form-item label="绑定泊位" prop="pkId">
									<el-select
										v-model="updateForm.pkId"
										placeholder="请选择"
										style="width: 100%"
									>
										<el-option
										v-for="item in parkList"
										:key="item.pkId"
										:label="item.pkNo"
										:value="item.pkId"
										>
										</el-option>
									</el-select>
									</el-form-item>
                      </el-col>
                  </el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateshow = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </span>
		</el-dialog>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        updateForm:{},
        addForm:{},
        parkList:{},
        GeoTableData:[],
        pageInfo: {
           pageSizes: [5, 10, 20, 50],
           total: 0,
          },
        query:{
            geoModel:"",
            currentPage:1,
            pageSize:5
          },
          dialog: {
              addshow: false,
              updateshow: false,
            },
      };
    },
    methods: {
        loadGeo(){
          this.$axios.post("/admin/geo/getAllGeo", this.query).then((res) => {
                      this.GeoTableData = res.data.data.list;
                      this.pageInfo.total = res.data.data.total;
            });
        },
    //请求所有泊位
       loadPark(){
        this.$axios.get("admin/park/allPark").then((res) => {
            this.parkList = res.data.data;
        })
        .catch((error) => {
          this.$message.error("出错了，请稍后重试");
        });
       },
       reset(){
        this.query.geoModel = "";
        this.loadGeo();
       },
    handleDelete(id){
      this.$axios.delete("admin/geo/" + id).then((res) => {
			if (res.data.code == 200) {
				this.$message.success("删除成功");
				this.loadGeo();
				} else {
				this.$message.info("删除失败");
				}
		})
    },
    handleEdit(id) {
		this.$axios.get("admin/geo/" + id).then(res => {
			this.updateForm = res.data.data;
		});
			this.dialog.updateshow = true;
	},
    update(){
        this.$axios.put("admin/geo/", this.updateForm).then((res) => {
				if (res.data.code == 200) {
					this.$message.success("修改成功");
					this.dialog.updateshow = false;
					this.loadGeo();			
				} else {
					his.$message.error("修改失败");
					}
				})
         },
        save(){
		    this.$axios.post("admin/geo/add", this.addForm).then((res) => {
          		this.$message.success("添加成功");
              this.loadGeo();
          		this.dialog.addshow = false;
          		//需要指定prop属性
          		this.$refs.addForm.resetFields();
            	//重置上传控件
         		this.$refs.upload.clearFiles();
          		  //修改是否显示对应的值
         		this.upload.uploadDisabled = false;
        });
	},

    },

    mounted(){
      this.loadGeo();
      this.loadPark();
    }
  };
  </script>